<template>
  <!-- 添加数据模块 -->
  <div>
    <el-dialog title="添加用户" :visible.sync="dack" width="60%">
      <div>
        <!-- 表单验证 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 用户名 -->
          <el-form-item label="添加用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>

          <!-- 密码 -->
          <el-form-item label="添加密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <!-- 邮箱 -->
          <el-form-item label="添加邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <!-- 电话 -->
          <el-form-item label="添加电话" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <!-- 结束 -->
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cance">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["dack"],
  data() {
    return {
      ruleForm: {
        username: "", //用户名
        password: "", //密码
        email: "", //邮箱,
        mobile: "", //电话
      },
      rules: {
        username: [
          { required: true, message: "请输入账户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入电话", trigger: "blur" },
          //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      eliminate: false,
    };
  },
  methods: {
    cance() {
      //取消提交
      this.$emit("cance", false, 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 关闭表单
          // this.dialogVisible = false;
          //   传参关闭表单
          //传输数据
          let list = {};
          let use = this.ruleForm;
          list.username = use.username;
          list.password = use.password;
          list.email = use.email;
          list.mobile = use.mobile;

          this.$emit("cance", false, 2, list);

          // 触发变化
          this.eliminate = !this.eliminate;
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  watch: {
    eliminate: {
      // 重置表单
      handler() {
        this.resetForm("ruleForm");
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
</style>